<template>
  <div class="gallery-wrapper" @click="handleGalleryClick" ref="scroll">
    <div class="swiper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) of imgUrls" :key="index">
          <img class="gallery-img" :src="item" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'Gallery',
  props: {
    imgUrls: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observeParents: true,
        observer: true
      }
    }
  },
  methods: {
    handleGalleryClick () {
      this.$emit('galleryClose')
    }
  },
  activated () {
    this.$refs.scroll.addEventListener('touchmove', function (e) {
      e.preventDefault() // 阻止gallery touchmove事件的滚动穿透
    }, false)
  }
}
</script>

<style lang="scss" scoped>
  @import "~styles/scss/mixins.scss";
  .gallery-wrapper {
    display: flex;
    z-index: 99;
    overflow: hidden;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.9);
    .swiper {
      width: 100%;
      @include fixedHeght(100%);
      .gallery-img {
        width: 100%;
      }
    }
  }
</style>
<style scoped>
  .gallery-wrapper >>> .swiper-pagination {
    position: fixed;
    bottom: 1rem;
    color: #fff;
  }
</style>
